<ion-header>
  <ion-toolbar class="toolbar-head">
    <ion-buttons slot="start" mode='ios'>
      <ion-back-button text=""></ion-back-button>
    </ion-buttons>
    <ion-title>Place Your Order</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <div class="order-content">
    <div class="address" *ngIf="!noAddress">
      <div style="float: left;height: 100px; padding: 10px;">
        <img style="width: 20px;height: 20px;margin-top: 30px;" src="../../../../assets/img/location.png" alt="">
      </div>
      <div style="padding-top: 10px;">
        <div class="order-address-item">
          <ion-label>{{addressList.addressUserName}}</ion-label>
          <label>{{addressList.addressPhone}}</label>
        </div>
        <div class="order-address-item">
          <ion-label>{{addressList.address}}</ion-label>
        </div>

        <div class="order-address-item other-text" (click)="otherAdd()">
          <ion-label>Edit address</ion-label>
          <img src="../../../../assets/img/order-down.png" alt="">
        </div>
      </div>
    </div>

    <div class="pay-type" *ngIf="noAddress" (click)="otherAdd()" >
      <ion-item class="pay-item" lines='none'>
        <!-- <img class="pay-item-icon" src="../../../../assets/img/wankaifu.png" alt=""> -->
        <ion-label>Add address</ion-label>
        <!-- <img class="pay-item-select" src="../../../../assets/img/addr.png" alt=""> -->
        <img class="pay-item-select" src="../../../../assets/img/right.png" alt="">
      </ion-item>
    </div>


    <div style="height: 10px; width: 100%;background: #5E5E5E;"></div>
    <div class="pay-type" *ngIf="!isBackCard" [routerLink]="['/payment-add-card']" routerLinkActive="router-link-active" >
      <ion-item class="pay-item" lines='none'>
        <!-- <img class="pay-item-icon" src="../../../../assets/img/wankaifu.png" alt=""> -->
        <ion-label>Add a payment method</ion-label>
        <!-- <img class="pay-item-select" src="../../../../assets/img/addr.png" alt=""> -->
        <img class="pay-item-select" src="../../../../assets/img/right.png" alt="">
      </ion-item>
    </div>
    <!-- <div class="pay-type" *ngIf="isBackCard" [routerLink]="['/payment-type']" routerLinkActive="router-link-active" > -->
    <div class="pay-type" *ngIf="isBackCard" (click)="onClickItemBack()" >
      <ion-item class="pay-item" lines='none'>
        <img class="pay-item-icon" src="../../../../assets/img/wankaifu.png" alt="">
        <ion-label>{{utilsCard(backCardInfo.cardNo) }}</ion-label>
        <!-- <img class="pay-item-select" src="../../../../assets/img/addr.png" alt=""> -->
        <img class="pay-item-select" src="../../../../assets/img/right.png" alt="">
      </ion-item>
    </div>


    <div style="height: 10px; width: 100%;background:  #5E5E5E;"></div>
    <div class="shop-list">
      <div class="list-content" *ngFor="let item of goodsInfo;let idx=index;">
        <img style="margin-right: 10px;" onerror="this.src='../../assets/img/zhanshi3.png';this.onerror=null" src='{{solaImage(item.procImg)}}' alt="">
        <div class="list-content-right">
          <div class="goods-name-div">
            <ion-text class="goods-name">
              {{item.procName}}
            </ion-text>
          </div>
          <div class="list-content-select">
            <label>color：{{item.color}} size：{{item.size}}</label>
          </div>
          <div class="list-content-money">
            <label>${{AmountOfConversion(item.procCashPrice)}}</label>
            <div class="list-content-num">
              <img src="../../assets/img/jian.png" alt="" (click)="price(0,idx)">
              <span>{{item.num}}</span>
              <img src="../../assets/img/jia.png" alt="" (click)="price(1,idx)">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="height: 10px; width: 100%;background:  #5E5E5E;"></div>
    <ion-item lines='none' class="item-content">
      <ion-label> Order total:      </ion-label>
      <ion-note>${{allPrice}} </ion-note>
    </ion-item>
   
    <!-- <div style="height: 10px; width: 100%;background:  #5E5E5E;"></div> -->
    <ion-item lines='none' class="item-content">
      <ion-label>
        Shipping fee:
      </ion-label>
      <ion-note>${{expressFee}} </ion-note>
    </ion-item>
    <ion-item lines='none' class="item-content">
      <ion-label>
        Items:
      </ion-label>
      <ion-note>
        ${{allPrice}}
      </ion-note>
    </ion-item>   
    <div style="height: 10px; width: 100%;background: #5E5E5E;"></div>
    <ion-item lines='none' (click)="onDiscount()">
      <ion-label style="color: #333333; font-size: 0.8rem;">Apply Coupon </ion-label>
      <ion-note *ngIf="couponAccInfo" style="margin-right: 10px;">use {{AmountOfConversion(couponAccInfo.couponPrice)}}$</ion-note>
      <img style="height: 15px;margin-right: 10px;" src="../../../../assets/img/right.png" alt="">
    </ion-item>
    <div style="height: 10px; width: 100%;background:  #5E5E5E;"></div>
  
  <div style="height: 10px; width: 100%;background: #5E5E5E;"></div>
    <ion-item lines='none' class="item-content">
      <ion-label>
        Leave a Note
      </ion-label>
      <ion-input type="text" slot="end" [(ngModel)]="remarks" placeholder="Enter your note…"></ion-input>
    </ion-item>
    <div style="height: 30px; width: 100%;background: #f6f6f6;"></div>
  </div>
  <ion-footer class="footer footer-order-bg">
    <label style="line-height: 50px;padding-right: 10px;">Total： ${{allPrice+expressFee}}</label>
    <button class="btn" (click)="pay()">Payment</button>
  </ion-footer>
</ion-content>